<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
// import HelloWorld from "@/components/HelloWorld.vue";
// import vuesvg from "@/assets/vue.svg";
// import vitesvg from "/vite.svg";
import { ref } from "vue";
import Bardemo from "@/components/bardemo.vue";
import LineDemo from "@/components/linedemo.vue";
import PieDemo from "@/components/piedemo.vue";
const nowclick = ref(1);
const updateNowClick = (val: number) => {
  nowclick.value = val;
};
</script>

<template>
  <div>
    <div class="app-container">
      <div class="click-dom" @click="updateNowClick(0)">
        <h1>PV/PU 趋势图</h1>
      </div>
      <div class="click-dom" @click="updateNowClick(1)">
        <h1>关键性能数据</h1>
      </div>
      <div class="click-dom" @click="updateNowClick(2)">
        <h1>异常数据数据</h1>
      </div>
    </div>
    <div class="charts-show">
      <Bardemo v-if="nowclick==0"/>
      <LineDemo v-if="nowclick==1" />
      <PieDemo v-if="nowclick==2" />
    </div>
  </div>
</template>

<style scoped>
.app-container {
  border: solid 1px black;
  width: 100%;
  height: 200px;
  display: flex;
  justify-items: center;
  align-items: center;
}
.charts-show {
  border: solid 1px black;
  width: 100%;
  height: 500px;
  margin-top: 15px;
}
.click-dom {
  border: solid 1px black;
  width: 33.3%;
  height: 150px;
  margin: 15px;
  display: inherit;
  align-items: center;
  justify-content: center;
}
.click-dom:nth-child(1):hover {
  cursor: pointer;
  filter: drop-shadow(0 0 2em #646cffaa);
}
.click-dom:nth-child(2):hover {
  cursor: pointer;
  filter: drop-shadow(0 0 2em #42b883aa);
}
.click-dom:nth-child(3):hover {
  cursor: pointer;
  filter: drop-shadow(0 0 2em #ffb43bf4);
}
</style>
